<template>
  <div class="api-test-container">
    <div class="card">
      <div class="card-header">
        <h2>Axios API测试 - 消息提示演示</h2>
      </div>

      <div class="button-group">
        <button class="btn btn-primary" @click="testGetUsers" :disabled="loading">
          {{ loading ? '加载中...' : '获取用户列表' }}
        </button>

        <button class="btn btn-success" @click="testSuccessMessage">
          测试成功消息
        </button>

        <button class="btn btn-warning" @click="testWarningMessage">
          测试警告消息
        </button>

        <button class="btn btn-error" @click="testErrorMessage">
          测试错误消息
        </button>

        <button class="btn btn-info" @click="testInfoMessage">
          测试信息消息
        </button>
      </div>

      <div class="message-test-group">
        <h3>消息格式测试（支持字符串/数组）</h3>
        <button class="btn btn-error" @click="testArrayErrorMessage">
          测试数组错误消息
        </button>

        <button class="btn btn-error" @click="testStringErrorMessage">
          测试字符串错误消息
        </button>

        <button class="btn btn-info" @click="testEmptyMessage">
          测试空消息处理
        </button>

        <button class="btn btn-error" @click="testRealBackendError">
          测试后端错误格式
        </button>
      </div>

      <div class="axios-test-group">
        <h3>Axios 特性测试</h3>
        <button class="btn btn-warning" @click="test404Error" :disabled="loading">
          测试 404 错误
        </button>

        <button class="btn btn-info" @click="testGetWithParams" :disabled="loading">
          测试带参数请求
        </button>

        <button class="btn btn-primary" @click="testAxiosTimeout" :disabled="loading">
          测试超时处理
        </button>
      </div>

      <div class="notification-group">
        <h3>通知消息测试</h3>
        <button class="btn btn-primary" @click="testSuccessNotification">
          成功通知
        </button>

        <button class="btn btn-error" @click="testErrorNotification">
          错误通知
        </button>
      </div>

      <div v-if="users.length > 0" class="user-list">
        <h3>用户列表</h3>
        <table class="user-table">
          <thead>
            <tr>
              <th>ID</th>
              <th>姓名</th>
              <th>邮箱</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="user in users" :key="user.id">
              <td>{{ user.id }}</td>
              <td>{{ user.name }}</td>
              <td>{{ user.email }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { userApi } from '@/services/userApi'
import { messageService } from '@/services/messageService'
import { formatMessage } from '@/utils/messageHelper'
import { apiService } from '@/services/api'
import { ElMessage } from 'element-plus'
import type { User } from '@/types/api'

const users = ref<User[]>([])
const loading = ref(false)

// 测试获取用户列表
const testGetUsers = async () => {
  try {
    loading.value = true
    // 这里会触发响应拦截器，如果后端返回 message，会自动显示提示
    const result = await userApi.getUsers()
    users.value = result
  } catch (error) {
    console.error('获取用户列表失败:', error)
    // 错误已在拦截器中处理
  } finally {
    loading.value = false
  }
}

// 测试各种消息提示
const testSuccessMessage = () => {
  messageService.success('操作成功！这是一个成功提示消息')
}

const testWarningMessage = () => {
  messageService.warning('注意！这是一个警告提示消息')
}

const testErrorMessage = () => {
  messageService.error('错误！这是一个错误提示消息')
}

const testInfoMessage = () => {
  messageService.info('提示：这是一个信息提示消息')
}

// 测试数组格式的错误消息
const testArrayErrorMessage = () => {
  const arrayMessage = [
    '请输入有效的邮箱地址',
    '姓名不能为空',
    '密码长度至少6位'
  ]
  const formattedMessage = formatMessage(arrayMessage)
  messageService.error(formattedMessage)
}

// 测试单个字符串错误消息
const testStringErrorMessage = () => {
  const stringMessage = '用户名已存在，请选择其他用户名'
  const formattedMessage = formatMessage(stringMessage)
  messageService.error(formattedMessage)
}

// 测试空消息处理
const testEmptyMessage = () => {
  const emptyMessage = ''
  const formattedMessage = formatMessage(emptyMessage)
  if (formattedMessage) {
    messageService.info(formattedMessage)
  } else {
    messageService.info('消息为空，不显示任何内容')
  }
}

// 测试后端返回的真实错误数据格式
const testRealBackendError = () => {
  // 模拟后端返回的错误数据
  const backendErrorResponse = {
    success: false,
    data: null,
    message: ['请输入有效的邮箱地址'],
    statusCode: 400
  }

  const formattedMessage = formatMessage(backendErrorResponse.message)
  messageService.error(formattedMessage)

  ElMessage.info('这是模拟后端返回的错误数据格式')
}

// 测试 404 错误
const test404Error = async () => {
  try {
    loading.value = true
    // 请求一个不存在的路径
    await apiService.get('/nonexistent-endpoint')
  } catch (error) {
    console.error('404错误测试:', error)
  } finally {
    loading.value = false
  }
}

// 测试带参数的 GET 请求
const testGetWithParams = async () => {
  try {
    loading.value = true
    // 使用 axios 的参数功能
    await apiService.get('/users', {
      params: { page: 1, size: 10, search: 'test' }
    })
    ElMessage.success('带参数的 GET 请求测试完成')
  } catch (error) {
    console.error('带参数请求错误:', error)
  } finally {
    loading.value = false
  }
}

// 测试 Axios 超时功能
const testAxiosTimeout = async () => {
  try {
    loading.value = true
    ElMessage.info('正在测试超时处理...')
    // 模拟一个不存在的接口，用于测试超时
    await apiService.get('/timeout-test-endpoint')
  } catch (error) {
    console.error('超时测试:', error)
  } finally {
    loading.value = false
  }
}

// 测试通知消息
const testSuccessNotification = () => {
  messageService.notification.success('成功通知', '这是一个成功的通知消息，会在右上角显示')
}

const testErrorNotification = () => {
  messageService.notification.error('错误通知', '这是一个错误的通知消息，不会自动关闭')
}
</script>

<style scoped>
.api-test-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.card {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  transition: 0.3s;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  padding: 18px 20px;
  border-bottom: 1px solid #ebeef5;
  box-sizing: border-box;
  background-color: #f5f7fa;
}

.card-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.button-group,
.message-test-group,
.axios-test-group,
.notification-group {
  padding: 20px;
  margin-bottom: 10px;
}

.message-test-group,
.axios-test-group,
.notification-group {
  border-top: 1px solid #ebeef5;
  padding-top: 20px;
}

.message-test-group h3,
.axios-test-group h3,
.notification-group h3 {
  margin-bottom: 15px;
  color: #333;
  font-size: 16px;
}

.btn {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-color: #dcdfe6;
  color: #606266;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: 0.1s;
  font-weight: 500;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.btn:hover {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}

.btn-primary {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
}

.btn-primary:hover {
  background: #66b1ff;
  border-color: #66b1ff;
  color: #fff;
}

.btn-success {
  color: #fff;
  background-color: #67c23a;
  border-color: #67c23a;
}

.btn-success:hover {
  background: #85ce61;
  border-color: #85ce61;
  color: #fff;
}

.btn-warning {
  color: #fff;
  background-color: #e6a23c;
  border-color: #e6a23c;
}

.btn-warning:hover {
  background: #ebb563;
  border-color: #ebb563;
  color: #fff;
}

.btn-error {
  color: #fff;
  background-color: #f56c6c;
  border-color: #f56c6c;
}

.btn-error:hover {
  background: #f78989;
  border-color: #f78989;
  color: #fff;
}

.btn-info {
  color: #fff;
  background-color: #909399;
  border-color: #909399;
}

.btn-info:hover {
  background: #a6a9ad;
  border-color: #a6a9ad;
  color: #fff;
}

.btn:disabled {
  color: #c0c4cc;
  cursor: not-allowed;
  background-image: none;
  background-color: #fff;
  border-color: #ebeef5;
}

.user-list {
  padding: 0 20px 20px;
}

.user-list h3 {
  margin-bottom: 15px;
  color: #333;
  font-size: 16px;
}

.user-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid #ebeef5;
  font-size: 14px;
  color: #606266;
}

.user-table th,
.user-table td {
  border-bottom: 1px solid #ebeef5;
  padding: 12px 0;
  text-align: left;
  padding-left: 10px;
}

.user-table th {
  background-color: #f5f7fa;
  color: #909399;
  font-weight: 500;
}

.user-table tbody tr:hover {
  background-color: #f5f7fa;
}
</style>